<template>
  <div class="module-box">
    <!-- 左 -->
    <div style="flex: 0 1 25%">
      <dv-border-box-1 style="width: 100%; height: 200px">
        <span style="position: absolute; top: 20px; left: 20px; font-size: 14px"
          >小区剩余车位</span
        >
        <dv-capsule-chart
          :config="config1"
          style="
            width: 80%;
            height: 120px;
            position: absolute;
            top: 25px;
            left: 0;
            bottom: 0;
            right: 0;
            margin: auto;
          "
        />
      </dv-border-box-1>
      <!-- 小区入住率 -->
      <dv-border-box-8 style="width: 100%; height: 200px" dur="5">
        <span style="position: absolute; top: 10px; left: 10px; font-size: 14px"
          >小区入住率</span
        >
        <dv-percent-pond
          :config="parkingConfig"
          style="
            width: 90%;
            height: 120px;
            position: absolute;
            top: 0;
            left: 0;
            bottom: 0;
            right: 0;
            margin: auto;
          "
        />
        <!-- <dv-water-level-pond
          :config="config3"
          style="
            width: 80%;
            height: 150px;
            position: absolute;
            top: 0;
            left: 0;
            bottom: 0;
            right: 0;
            margin: auto;
          "
        /> -->
      </dv-border-box-8>
      <!-- 柱状图 -->
      <dv-border-box-10 style="width: 100%; height: 200px">
        <BarChart />
      </dv-border-box-10>
    </div>
    <!-- 中 -->
    <div style="flex: 0 1 50%">
      <!-- <dv-border-box-9 style="width: 100%; height: 600px"> -->
      <dv-border-box-1 style="width: 100%; height: 600px">
        <dv-flyline-chart
          :config="config4"
          style="
            width: 95%;
            height: 95%;
            position: absolute;
            top: 0;
            left: 0;
            bottom: 0;
            right: 0;
            margin: auto;
          "
        />
      </dv-border-box-1>
      <!-- </dv-border-box-9> -->
    </div>
    <!-- 右 -->
    <div style="flex: 0 1 25%">
      <dv-border-box-8 style="width: 100%; height: 300px">
        <span style="position: absolute; top: 10px; left: 10px; font-size: 14px"
          >缴费进度</span
        >
        <dv-capsule-chart
          :config="config2"
          style="
            width: 90%;
            height: 200px;
            position: absolute;
            top: 0;
            left: 0;
            bottom: 0;
            right: 0;
            margin: auto;
          "
        />
      </dv-border-box-8>
      <!-- 轮播列表 -->
      <dv-border-box-10 style="width: 100%; height: 300px">
        <span style="position: absolute; top: 10px; left: 20px; font-size: 14px"
          >进出车辆记录</span
        >
        <!-- <dv-scroll-board
          :config="scrollConfig"
          style="
            width: 90%;
            height: 220px;
            position: absolute;
            top: 0;
            left: 0;
            bottom: 0;
            right: 0;
            margin: auto;
          "
        /> -->
        <dv-scroll-board
          :config="scrollConfig"
          @click="handleClickCar"
          style="
            width: 90%;
            height: 70%;
            position: absolute;
            top: 0;
            left: 0;
            bottom: 0;
            right: 0;
            margin: auto;
          "
        />
      </dv-border-box-10>
    </div>
  </div>
</template>

<script>
import { ranks } from "@/mockApi/homepage/MarkCarData";
import BarChart from "@/views/home/children/screen/components/BarChart";
import { h } from "vue";
import { ElNotification } from "element-plus";
export default {
  name: "SecondModule",
  components: {
    BarChart,
  },
  data() {
    return {
      parkingConfig: {
        value: 66,
      },
      config1: {
        data: [
          {
            name: "小区一",
            value: 167,
          },
          {
            name: "小区二",
            value: 123,
          },
          {
            name: "小区三",
            value: 55,
          },
          // {
          //   name: "小区四",
          //   value: 98,
          // },
        ],
      },
      config2: {
        data: [
          {
            name: "一单元",
            value: 167,
          },
          {
            name: "二单元",
            value: 123,
          },
          {
            name: "三单元",
            value: 98,
          },
          {
            name: "四单元",
            value: 75,
          },
          {
            name: "五单元",
            value: 66,
          },
        ],
        colors: ["#e062ae", "#fb7293", "#e690d1", "#32c5e9", "#96bfff"],
        unit: "(户)",
        showValue: true,
      },
      config3: {
        data: [66, 45],
        shape: "roundRect",
        colors: ["#f60", "green"],
        waveOpacity: 0.2,
      },

      config4: {
        centerPoint: [0.48, 0.35],
        points: [
          [0.52, 0.23],
          [0.43, 0.29],
          [0.59, 0.35],
          [0.53, 0.47],
          [0.45, 0.54],
          [0.36, 0.38],
          [0.62, 0.55],
          [0.56, 0.56],
          [0.37, 0.66],
          [0.55, 0.81],
          [0.55, 0.67],
          [0.37, 0.29],
          [0.2, 0.36],
          [0.76, 0.41],
          [0.59, 0.5],
          [0.68, 0.5],
          [0.59, 0.5],
        ],
        bgImgUrl: require("@/assets/img/map1.png"),
        flylineColor: "#fff",
        centerPointImg: {
          url: require("@/assets/img/mapCenterPoint.png"),
        },
        pointsImg: {
          url: require("@/assets/img/mapPoint.png"),
        },
      },
      scrollConfig: {
        header: ["时间", "车牌", "缴费"],
        // data: [],
        data: [],
        // columnWidth: [140, 140, 140],
      },
    };
  },

  methods: {
    // carData数据请求
    carDataList() {
      ranks.getAll().then((res) => {
        // let arr = JSON.parse(JSON.stringify(res[0]));
        this.scrollConfig.carData = res;
        console.log(res, "res");
        this.scrollConfig = {
          header: ["时间", "姓名", "车牌", "缴费", "地址"],
          data: res,
        };
        this.$store.commit("CarData/SET_CARLIST", res);
      });
    },
    // 点击车辆进出记录
    handleClickCar({ row }) {
      console.log(row, "row");
      if (!row) {
        return;
      } else {
        ElNotification({
          title: "车辆记录详情",
          message: h(
            "i",
            { style: "color: teal; cursor:pointer;white-space: pre-wrap;" },
            ` 时间：${row[0]} \n 姓名：${row[1]} \n 车牌：${row[2]} \n 缴费：${row[3]} \n 地址：${row[4]}`
          ),
        });
      }
    },
  },
  mounted() {
    this.carDataList();
  },
};
</script>

<style scoped lang="scss">
// .dv-scroll-board {
//   .header {
//     display: flex !important;
//     .header-item {
//       flex: 1 !important;
//     }
//   }
// }
</style>
